<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>XXXX系统</title>
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/comstyle/validation/validation.css">
		<style type="text/css">
body {
	font-size: 12px;
}

/* form中显示文字的label */
.slabel {
	width: 100px;
	display: -moz-inline-box;
	line-height: 1.8;
	display: inline-block;
	text-align: right;
}

.gray {
	color: gray;
}
</style>
	</head>
	<body>
	<!--  div id="p" class="easyui-panel" title="My Panel" iconCls="icon-save" </div>-->
		<form id="commentForm" method="post" action="${pageContext.request.contextPath}/user/addUserJsonUserAction.action" enctype="multipart/form-data">
			<input type="hidden" name="deleteflag" value="0" />
			<fieldset style="width: 800px;">
				<legend>
					添加管理员
				</legend>
				<p>
					<label for="cname" class="slabel">
						<em class="textred">*</em> 用户名:
					</label>
					<input id="cname" name="username" size="25" />
				</p>
				<p>
					<label for="pw" class="slabel">
						<em class="textred">*</em> 密码:
					</label>
					<input id="pw" name="password" type="password" size="25" />
				</p>
				<p>
					<label for="begindate" class="slabel">
						<em class="textred">*</em> 开始日期:
					</label>
					<input id="begindate" name="begindate"  />
				</p>
				<p>
					<label for="enddate" class="slabel">
						<em class="textred">*</em> 结束日期:
					</label>
					<input id="enddate"  name="enddate" class="easyui-datebox"  />
				</p>
				<p>
					<label for="begindate97" class="slabel">
						<em class="textred">*</em> 开始日期:
					</label>
					<input id="begindate97" name="begindate97"  onfocus="WdatePicker({skin:'ext',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'enddate97\')}'});" />
				</p>
				<p>
					<label for="enddate97" class="slabel">
						<em class="textred">*</em> 结束日期:
					</label>
					<input id="enddate97"  name="enddate97"  onfocus="WdatePicker({skin:'default',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'begindate97\')}',maxDate:'%y-%M-#\{%d\}'});" />
				</p>
				<p>
					<label for="mobile" class="slabel">
						<em class="textred">*</em> 移动设备:
					</label>
					<input id="mobile" type="text" name="mobile"/>&nbsp;
				</p>
				<p>
					<label for="mobile" class="slabel">
						<em class="textred">*</em> 文件:
					</label>
					<input  id="mobile" type="file" name="upload"/>
				</p>
			</fieldset>
					<p>
			<label for="editor1">
				请填写:</label>
					<textarea cols="40" id="content" name="content" rows="10" style=" width:200px;"></textarea>
				</p>
				<p style="text-align: center;">
					<input class="submit" type="submit" value="提交" />
				</p>
		</form>

		<jsp:include page="/common/jquery.jsp" />
		<jsp:include page="/common/easyui.jsp" />
		<jsp:include page="/common/jquery-validate.jsp" />
		<jsp:include page="/common/jquery-autocomplete.jsp" />
		<jsp:include page="/common/my97.jsp" />
		
		<script type="text/javascript" src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"></script>
		<script type="text/javascript">  
		
		$(function (){
		//通过代码方式增加日期选择框
		 $('#begindate').datebox({});
		
			$.ajax({
		        type: "post",
		        cache: false,
		        url: webpath+"/user/completeBoxUserAction.action",
		        data: {},
		        dataType: "json",//html 
		        beforeSend: function(XMLHttpRequest){
		        },
		        success: function(data, textStatus){
		            if (data.success) {
            	      $("#mobile").autocomplete(data.datas, {
            	      	scroll: true,
						scrollHeight: 300,
            	      width: 300,
            	      //是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
            	      multiple :true,
            	      mustMatch :true,
            	      //如果是多选时,用来分开各个选择的字符. Default: ","
            	      multipleSeparator :"|",
						//返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数    
	                     formatItem: function (row, i, max) {
	                         return "<table width='200px'><tr><td align='left'>" + row.key 
	                         + "</td><td align='right'>" 
	                         + row.value + "</td></tr></table>";
	                     },
	                     //formatResult: function (row, i, max) {
	                       //  return row.id;
	                     //},
	                     formatMatch: function(row, i, max){
	                         return row.key;
	                     }
	                 }).result(function(event, data, formatted) {
					        //如选择后给其他控件赋值，触发别的事件等等
					        ///event: 事件对象. event.type为result. data: 选中的数据行. formatted:formatResult函数返回的值
					         //alert(formatted);
					        //alert(data.id);
					  });
		            }
		        },
		        error: function(XMLHttpRequest, textStatus, errorThrown){
		            //如果发生异常则打印出异常提示信息
		            showProcess(true, '网络出现异常,请稍后再试...');
		        }
		    });
		});
		
		
		
		
		
		
		
	CKEDITOR.editorConfig = function( config ) { config.toolbar = 'MyToolbar';   config.toolbar_MyToolbar = [ { name: 'document', items : [ 'Source','NewPage','Preview' ] }, { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] }, { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] }, '/', { name: 'styles', items : [ 'Styles','Format' ] }, { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] }, { name: 'insert', items :[ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ,'Iframe' ] }, { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, { name: 'tools', items : [ 'Maximize','-','About' ] } ]; }; 


		
		var editor = CKEDITOR.replace( 'content' ,{
			toolbar : 'TJ',
			   width : '100',               //设置宽度
          height : '50'             //设置高度
			
		});
		$('#commentForm').submit(function(){
        	CKEDITOR.instances.content.updateElement();
    	});

		</script>
		
		<script type="text/javascript">
		//自定义验证方法 
	jQuery.validator.addMethod("endDate", 
		function(value, element, param) {//验证规则
		var startDate = $("#"+param).datebox('getValue'); 
		return new Date(Date.parse(startDate.replace("-", "/"))) <= new Date(Date.parse(value.replace("-", "/"))); 
		}, 
		"结束日期必须大于开始日期!"); 
		
		
   /*=验证=*/
   $(function()
   {
    $(".datebox :text").attr("readonly","readonly");

   
   //showProcess(true, '温馨提示', '正在提交数据...');
  // showProcess(false);
       var fv = $("#commentForm").validate(
       {
           errorClass: "error",
           submitHandler: function(form)
           {
           
           //插件应该是在内部用一种div的形式覆盖在了这个textarea元素上面
		        //	$("#content").val(CKEDITOR.document.getBody().getHtml());
           		//验证是否通过
          		// alert(fv.form());
               //如果想提交表单, 需要使用
              	// form.submit();
                //$("#commentForm :")
                
      /* var x=$("#commentForm").serializeArray();
	  $.each(x, function(i, field){
	    alert(field.name + ":" + field.value + " ");
		});*/
		$.ajax({
		        type: "post",
		        cache: false,
		        url: webpath+"/user/addUserJsonUserAction.action",
		        data: $("#commentForm").serializeArray(),
		        dataType: "json",//html 
		        beforeSend: function(XMLHttpRequest){
		       		//alert(editor.document.getBody().getText()); //取得纯文本
		 			//alert(editor.document.getBody().getHtml()); //取得纯文本
		        	//alert(CKEDITOR.instances.content.getData());//取得html文本
		            // Handle the beforeSend event
		            // ("beforeSend");
		            //防止重复点击
		            showProcess(true, '正在提交数据...');
		            $("#commentForm :submit").attr('disabled', 'true');
		        },
		        success: function(data, textStatus){
		            if (data.success) {
		                window.location = webpath + "/web/samples/grid.jsp";
		            }
		            else {
		            	showProcess(false);
		            	showMsg('网络出现异常,请稍后再试...');
		            	$("#commentForm :submit").removeAttr("disabled");
		            }
		        },
		        error: function(XMLHttpRequest, textStatus, errorThrown){
		            //如果发生异常则打印出异常提示信息
		            showProcess(true, '网络出现异常,请稍后再试...');
		        }
		    });
              	// alert($("#commentForm").serialize());
           },
           errorElement: "em",						//用来创建错误提示信息标签
		   success: function(label) {				//验证成功后的执行的回调函数
				label.html("&nbsp;").addClass("success");
		   },
		   errorPlacement: function(error, element) { //指定错误信息位置
		   		//处理my97提示
		   		if(element.attr('onfocus')!== undefined && element.attr('onfocus').indexOf("WdatePicker") != -1 ){
		   			error.appendTo(element.parent());
                } else if (element.attr('name').indexOf("date") != -1 ){  //如果是radio或checkbox
                    var eid = element.attr('name');  //获取元素的name属性
                    //alert(element.parent().parent().html());
                    error.appendTo(element.parent().parent());    //将错误信息添加当前元素的父结点后面
                } else if ( element.attr('name').indexOf("content") != -1) {  //如果是radio或checkbox
                    var eid = element.attr('name');  //获取元素的name属性
                    //alert(element.parent().parent().html());
                    error.appendTo(element.parent());    //将错误信息添加当前元素的父结点后面
                } else {
                    error.insertAfter(element);
                }
           	 },
           rules: {
               //为name为email的控件添加两个验证方法:required()和email()
               username: { required: true, minlength: 2 },
               password: {
					required: true,
					minlength: 6
			   },
   			   begindate97: {required:true},
   			   enddate97: {required:true},
			   enddate: {required:true,endDate:"begindate"},
			   content:{ required: true},
			   mobile:{ required: true}
           }
       });
   });        
</script>
	</body>
</html>